// Vuex模块 - 设备宽度和类型检测模块
const kuanModule = {
    namespaced: true,
    state: {
        // 全局存储浏览器的宽度和高度
        windowWidth: 0,
        windowHeight: 0,
        // 判断是否为移动设备
        yidong: false,
        // 判断是否为平板设备
        pingban: false,
        // 判断是否为桌面设备
        pc: false
    },
    mutations: {
        // 设置窗口尺寸
        setWindowSize(state, { width, height }) {
            state.windowWidth = width
            state.windowHeight = height
            
            // 根据宽度判断设备类型
            // 只区分大于1219px和小于等于1219px两种情况
            if (width > 1221) {
                // 大于1219px判定为桌面端
                state.pc = true
                state.yidong = false
                state.pingban = false
            } else {
                // 小于等于1219px判定为非桌面端
                state.pc = false
                state.yidong = true
                state.pingban = true
            }

        }
    },
    actions: {
        // 初始化窗口尺寸
        initWindowSize({ commit }) {
            // 获取当前窗口尺寸
            // 在uni-app环境中，使用uni.getSystemInfoSync()获取系统信息，兼容各平台
            let width = 0
            let height = 0
            
            try {
                // 优先尝试使用uni-app的API获取系统信息，兼容小程序环境
                const systemInfo = uni.getSystemInfoSync()
                width = systemInfo.windowWidth
                height = systemInfo.windowHeight
            } catch (error) {
                // 降级方案：在web环境下使用window对象
                if (typeof window !== 'undefined') {
                    width = window.innerWidth
                    height = window.innerHeight
                }
            }
            
            commit('setWindowSize', { width, height })
        },
        // 监听窗口大小变化
        startWindowResizeListener({ dispatch }) {
            if (typeof window !== 'undefined') {
                // 初始获取一次
                dispatch('initWindowSize')
                
                // 添加resize事件监听
                window.addEventListener('resize', () => {
                    dispatch('initWindowSize')
                })
            }
        }
    },
    getters: {
        // 获取窗口尺寸信息
        windowSize: (state) => ({
            width: state.windowWidth,
            height: state.windowHeight
        }),
        // 获取设备类型信息
        deviceInfo: (state) => ({
            yidong: state.yidong,
            pingban: state.pingban,
            pc: state.pc
        })
    }
}

export default kuanModule;